<template>
  <div class="commom-page-style">
    <van-nav-bar title="标题" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-field label="房源信息" :disabled="true" />
      <van-cell title="小区名称" is-link :value="titleValue" to="/AddSeach" />
      <van-cell class="my-input">
        <template #title>
          <span style="margin-right: 44px"
            >租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</span
          >
          <input
            type="text"
            name
            id
            placeholder="请输入租金/月"
            style="border: none"
            v-model="price"
          />
        </template>
        <template #right-icon>
          <span style="color: #c8c9cc">￥/月</span>
        </template>
      </van-cell>
      <van-field v-model="size" label="建筑面积" placeholder="请输入房屋面积">
        <template #button>㎡</template>
      </van-field>
      <van-cell :value="value1" is-link @click="huxing">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title"
            >户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span
          >
        </template>
      </van-cell>
      <van-cell :value="value2" is-link @click="loCeng">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">所在楼层</span>
        </template>
      </van-cell>
      <van-cell :value="value3" is-link @click="chaoXiang">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title"
            >朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</span
          >
        </template>
      </van-cell>
      <van-cell title="房屋标题"></van-cell>
      <div class="my-input my-input-one">
        <input
        v-model="title"
          type="text"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        />
      </div>
      <van-cell title="房屋图像"></van-cell>
      <div style="padding: 10px 20px">
        <van-uploader v-model="pic" multiple :after-read="afterRead"/>
      </div>
      <van-cell title="房屋配置"></van-cell>
      <div class="house_config">
        <ul class="house_list">
          <li
            class="house_item"
            v-for="(item, i) in houseSet"
            :key="item.letter"
          >
            <div @click="ic(item, i)" w ref="a">
              <p>
                <i :class="'iconfont' + ' ' + item.letter"></i>
              </p>
              {{ item.txt }}
            </div>
          </li>
        </ul>
      </div>
    </van-cell-group>
    <van-cell title="房屋描述" style="margin-top: 20px"></van-cell>
    <van-field
      v-model="description"
      rows="2"
      autosize
      type="textarea"
      maxlength="200"
      placeholder="请输入留言"
      show-word-limit
    />
    <!-- 底部 -->

    <div class="btm">
      <span class="left" @click="cancelPublishing">取消</span>
      <span class="right" @click="PublishHousing">提交</span>
    </div>
    <!-- 第一个 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm(1)"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <!-- 第二个 -->
    <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns2"
        @confirm="onConfirm(2)"
        @cancel="onCancel"
        @change="onChange2"
      />
    </van-popup>
    <!-- 第三个 -->
    <van-popup v-model="show3" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns3"
        @confirm="onConfirm(3)"
        @cancel="onCancel"
        @change="onChange3"
      />
    </van-popup>
  </div>
</template>

<script>

import { findInfo, issue, picApi } from '@/api'
import { Dialog, Notify } from 'vant'
export default {
  data () {
    return {
      classShow: false,
      // 请输入小区名称
      titleValue: '请输入小区名称',
      columns: [],
      columns2: [],
      columns3: [],
      // 本地的id
      localId: JSON.parse(localStorage.getItem('id')),
      // 控制弹出层
      show: false,
      show2: false,
      show3: false,
      value1: '请选择',
      value2: '请选择',
      value3: '请选择',
      houseSet: [
        { txt: '电视', letter: 'icon-dianshi' },
        { txt: '冰箱', letter: 'icon-bingxiang' },
        { txt: '洗衣机', letter: 'icon-xiyiji' },
        { txt: '空调', letter: 'icon-kongdiao' },
        { txt: '热水器', letter: 'icon-reshuiqi' },
        { txt: '天然气', letter: 'icon-tianranqi' },
        { txt: '衣柜', letter: 'icon-yigui' },
        { txt: '宽带', letter: 'icon-kuandai' },
        { txt: '暖气', letter: 'icon-nuanqi' },
        { txt: '沙发', letter: 'icon-shafa' }
      ],
      res: '',
      // 要传的参数
      // 小区名称
      community: '',
      // 价格
      price: 0,
      // 建筑面积
      size: 0,
      // 户型
      roomType: '',
      // 所在楼层
      floor: '',
      // 朝向
      oriented: '',
      // 房屋标题
      title: '',
      // 房屋图像
      houseImg: [],
      newImg: [],
      pic: [],
      // 房屋描述
      description: '',
      // 接受选择的icon
      supporting: [],
      icList: []
    }
  },
  async created () {
    // 选择房子信息的内容
    // 筛选条件都是一样的 传个死值
    // 获取筛选条件
    const res = await findInfo('AREA|88cff55c-aaa4-e2e0')
    console.log(res)
    this.res = res.data.body
    // 一开始默认是第0项
    this.roomType = this.res.roomType[0]
    this.floor = this.res.floor[0]
    this.oriented = this.res.oriented[0]
    // 户型 把渲染的文字提出来
    res.data.body.roomType.forEach((item) => {
      this.columns.push(item.label)
    })
    // 楼层
    console.log(res)
    res.data.body.floor.forEach((item) => {
      this.columns2.push(item.label)
    })
    // 朝向
    res.data.body.oriented.forEach((item) => {
      this.columns3.push(item.label)
    })
    console.log(this.$route.query)
    if (this.$route.query.name) {
      console.log(1)
      this.community = this.$route.query.name.community
      this.titleValue = this.$route.query.name.communityName
    } else {
      this.titleValue = '请输入小区名称'
    }
    // if (this.$route.query.name === '[object Object]') {
    //
    // } else {
    //   this.community = this.$route.query.name.community
    //   this.titleValue = this.$route.query.name.communityName
    // }
  },
  methods: {
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      const fd = new FormData()
      fd.append('file', file.file)
      const res = await picApi(fd)
      this.houseImg.push(res.data.body[0])
      console.log(this.houseImg)
    },
    onClickLeft () {
      this.$router.back()
    },
    // 弹出层 户型
    huxing () {
      this.show = true
    },
    loCeng () {
      this.show2 = true
    },
    chaoXiang () {
      this.show3 = true
    },
    // 弹出层--点击完成时触发的
    onConfirm (a) {
      if (a === 1) {
        this.value1 = this.roomType.label
        this.show = false
      } else if (a === 2) {
        this.value2 = this.floor.label
        this.show2 = false
      } else if (a === 3) {
        this.value3 = this.oriented.label
        this.show3 = false
      }
    },
    // 弹出层--点击取消时触发的
    onCancel () {
      console.log('取消')
    },
    // 忘了封装了...
    // 弹出层--内容改变时触发的
    onChange (picker, value, index) {
      this.roomType = this.res.roomType[index]
      console.log(this.roomType)
    },
    // 弹出层--内容改变时触发的
    onChange2 (picker, value, index) {
      this.floor = this.res.floor[index]
    },
    // 弹出层--内容改变时触发的
    onChange3 (picker, value, index) {
      this.oriented = this.res.oriented[index]
    },
    // 点击高亮
    ic (item, i) {
      if (this.$refs.a[i].style.color === '') {
        this.$refs.a[i].style.color = 'red'
        this.icList.push(item.txt)

        // this.icList = Array.from(new Set(this.icList))
      } else {
        this.$refs.a[i].style.color = ''
        this.icList.forEach((items, index) => {
          if (items === item.txt) {
            this.icList.splice(index, 1)
          }
        })
      }
      console.log(this.icList)
      console.log(this.icList.join('|'))
    },
    // 发布房源
    async PublishHousing () {
      // console.log(this.title)
      // console.log(this.description)
      // console.log(this.newImg)
      // console.log(this.oriented.value)
      // console.log(this.icList.join('|'))
      // console.log(this.price)
      // console.log(this.roomType.value)
      // console.log(this.size)
      // console.log(this.floor.value)
      // console.log(this.community)
      this.newImg = this.houseImg.join('|')
      if (this.pic) {
        Notify('未上传图片')
      } else {
        const res = await issue({
          title: this.title,
          description: this.description,
          houseImg: this.newImg,
          oriented: this.oriented.value,
          supporting: this.icList.join('|'),
          price: this.price,
          roomType: this.roomType.value,
          size: this.size,
          floor: this.floor.value,
          community: this.$route.query.name.community
        })
        console.log(res)
      }
    },
    // 取消发布
    cancelPublishing () {
      Dialog.confirm({
        cancelButtonText: '放弃',
        confirmButtonText: '继续编辑',
        title: '提示',
        message: '不发布了？？？'
      })
        .then(() => {
          // 继续

        })
        .catch(() => {
          // 放弃
          this.$router.push('/Home')
        })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__left {
  .van-icon-arrow-left {
    color: #fff;
  }
}
/deep/ .van-cell:first-child {
  .van-cell__title {
    color: green;
  }
}
/deep/ .my-input {
  ::-webkit-input-placeholder {
    color: #c8c9cc;
    font-size: 14px;
  }
}
.my-input-one {
  border: none;
  height: 40px;
  padding-left: 20px;
  input {
    border: none;
  }
}
// 房屋配置
.house_config {
  .house_list {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background: #fff;
    .house_item {
      padding: 20px 0;
      flex: 20%;
      font-size: 14px;
      .iconfont {
        font-size: 23px;
      }
    }
  }
}
/deep/.van-nav-bar__content {
  background-color: green;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
.ic {
  color: green;
}
.btm {
  position: fixed;
  bottom: 0px;
  text-align: center;
  line-height: 50px;
  .left {
    display: inline-block;
    width: 187.5px;
    height: 50px;
    background-color: #fff;
    color: #21b97a;
    font-size: 17px;
  }
  .right {
    display: inline-block;
    width: 187.5px;
    height: 50px;
    background-color: #21b97a;
    font-size: 17px;
    color: #fff;
  }
}
</style>
